<template>
  <div>
    <div id="unitui_logo" align="center">
      <p>{{Collapse?'U':'UnitUI'}}</p>
    </div>
    <div id="aside_menu">
      <el-menu router default-active="/home" :collapse="Collapse" @open="handleOpen" @close="handleClose">
        <el-submenu
          v-for="(menu,index) in menu_data"
          :key="index"
          v-show="menu.menu_show_status"
          :index="'i'+index"
        >
          <template #title>
            <i :class="menu.menu_icon"></i>
            <span>{{menu.menu_name}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="(item,i) in menu.children"
              v-show="item.menu_show_status"
              :key="i"
              :index="item.path"
            >
              <span>
                <i :class="item.menu_icon"></i>
                {{item.menu_name}}
              </span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  props:["Collapse"],
  data() {
    return {
      menu_data: JSON.parse(sessionStorage.getItem("menu_data"))
    };
  },
  methods: {
    handleOpen(data) {
      console.log(data);
    },
    handleClose(data) {
      console.log(data);
    },
  },
  mounted() {
    // console.log(this.menu_data);
  },
  watch:{
    Collapse(){
      // console.log(this.Collapse);
    }
  }
};
</script>